<template>
  <div class="setpass">
    <header>
      <van-nav-bar title="修改密码" left-arrow @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
      </van-nav-bar>
    </header>

    <main>
      <van-cell-group border>
        <van-field
          v-model="oldpass"
          label="旧密码"
          placeholder="请输入旧密码"
          autofocus
          clearable
          :type="flag1?'password':'text'"
          :right-icon="flag1?'closed-eye':'eye-o'"
          @click-right-icon="flag1=!flag1"
        />
      </van-cell-group>
      <van-cell-group border>
        <van-field v-model="newpass" clearable :type="flag?'password':'text'" :right-icon="flag?'closed-eye':'eye-o'" label="新密码" placeholder="请输入新密码"  @click-right-icon="flag=!flag"/>
      </van-cell-group>
      <div class="loginbtn">
        <van-button class="btn" type="danger" round block @click="update" :disabled="setpassbtn">完成</van-button>
      </div>
    </main>
  </div>
</template>
<script>
import {updatePassword} from "../api/user"
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
    data () {
        return {
            oldpass:"",
            newpass:"",
            flag1:true,
            flag:true,
        }
    },
    methods: {
        update(){
            updatePassword({userid:localStorage.getItem("userid"),oldpassword:this.oldpass,newpassword:this.newpass}).then(res=>{
                console.log(res);
                switch (res.data.code) {
                    case "10030":
                        Toast('原始密码错误，请重新输入');
                        break;
                    case "200":
                        Toast('修改成功，请重新登录');
                        localStorage.clear()
                        setTimeout(()=>{
                            this.$router.push("/login")
                        },1000)
                        break;           
                    default:
                        break;
                }

            })
        }
    },
    computed: {
        setpassbtn(){
            if(this.oldpass.trim()!=""&&/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])\S*$/.test(this.newpass)){
                return false
            }else{
                return true
            }
        }
    }
}
</script>
<style scoped>
.loginbtn {
  width: 80%;
  margin: 0.1rem auto;
}
.btn{
    margin: .1rem auto;
}
</style>